<template>
  <div>
    <div class="top">选择商品(只能选一个)</div>
    <div class="goods_list">
      <Table :columns="goodsColumns" :data="goodsList" @on-row-click="selectGoods"></Table>
      <p @click="getGoods" style="line-height: 40px;text-align: center;">加载更多</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'share-goods',
  data () {
    return {
      goodsList: [],
      goodsColumns: [
        {
          title: '图片',
          key: 'imagePath',
          width: 70,
          render: (h, params) => {
            return h('img', {
              attrs: {
                src: 'https://hycos-1257620396.file.myqcloud.com' + params.row.imagePath,
                width: '50px',
                height: '50px'
              }
            })
          }
        },
        {
          title: '价格',
          key: 'price',
          render: (h, params) => {
            return h('div', [
              h('p', params.row.title),
              h('p', {
                style: {
                  fontSize: '12px',
                  color: '#80848f'
                }
              }, params.row.goodsSkuName),
              h('p', {
                style: {
                  color: '#ed3f14'
                }
              }, params.row.afterDiscountPrice / 100 + '￥')
            ])
          }
        }
      ],
      selectId: [],
      pageNum: 0
    }
  },
  methods: {
    selectGoods (row) {
      this.$emit('sendShare', [row.goodsId])
    },
    getGoods () {
      this.pageNum++
      this.$ajax.post('/wx/goods/manage/pick/up/goods', {pageNum: this.pageNum, pageSize: 10}).then(res => {
        this.goodsList.push(...res.data.data.list)
      })
    }
  },
  created () {
    this.getGoods()
  }
}
</script>

<style scoped>
  .top{
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 12px;
    color: #fff;
    background-color: #bbbec4;
  }
  .goods_list{
    overflow: auto;
  }
  .goods_list li{
    overflow: hidden;
  }
</style>
